<template>
  <view class="content">
    <view class="form">
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          店铺名称
        </view>
        <view class="ipt" @tap="schoolShow = true">
          <view class="text">
            {{schoolText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          上课日期
        </view>
        <view class="ipt" @tap="dateShow = true">
          <view class="text">
            {{dateText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          上课时间
        </view>
        <view class="ipt">
          <view class="text" @tap="timeShow = true">
            <image class="img" src="../../static/img/alarm.png" mode=""></image>
            {{info.start_time}}
          </view>
          <view class="" style="margin: 0 20rpx;">
            至
          </view>
          <view class="text" @tap="timeShow1 = true">
            <image class="img" src="../../static/img/alarm.png" mode=""></image>
            {{info.end_time}}
          </view>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          教练姓名
        </view>
        <view class="ipt" @tap="getSchoolTeacherList()">
          <view class="text">
            {{teacherText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="useritem">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          学生姓名
        </view>
        <view class="ipt" @tap="getSchoolUserList()">
          <view class="text">
            {{userText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item" @tap="categoryTypeShow = true">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          课程大类
        </view>
        <view class="ipt">
          <view class="text">
            {{categoryTypeText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item" @tap="getAllFirstCategory()">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          一级分类
        </view>
        <view class="ipt">
          <view class="text">
            {{firstCategoryText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item" @tap="getAllSecondCategory()">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          二级分类
        </view>
        <view class="ipt">
          <view class="text">
            {{secondCategoryText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item" @tap="getAllVersion()">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          课程版本
        </view>
        <view class="ipt">
          <view class="text">
            {{versionText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item" @tap="planShow = true">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          课程类型
        </view>
        <view class="ipt">
          <view class="text">
            {{planText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="btn" @tap="savePlan()">
      确认提交
    </view>
    <!-- 学校名称下拉框 -->
    <u-picker :show="schoolShow" :columns="schoolColumns" keyName="school_name" @confirm="confirmSchool"
      @cancel="schoolShow = false"></u-picker>
    <!-- 课程类型下拉框 -->
    <u-picker :show="planShow" :columns="planColumns" keyName="label" @confirm="confirmPlan"
      @cancel="planShow = false"></u-picker>
    <!-- 日期下拉框 -->
    <u-datetime-picker :show="dateShow" v-model="date" mode="date" @confirm="confirmDate"
      @cancel="dateShow = false"></u-datetime-picker>
    <!-- 时间下拉框 -->
    <u-datetime-picker :show="timeShow" v-model="info.start_time" mode="time" @confirm="confirmStarTime"
      @cancel="timeShow = false"></u-datetime-picker>
    <!-- 时间下拉框 -->
    <u-datetime-picker :show="timeShow1" v-model="info.end_time" mode="time" @confirm="confirmEndTime"
      @cancel="timeShow1 = false"></u-datetime-picker>
    <!-- 老师下拉框 -->
    <u-picker :show="teacherShow" :columns="teacherColumns" keyName="teacher_nickname" @confirm="confirmTeacher"
      @cancel="teacherShow = false"></u-picker>
    <!-- 版本下拉框 -->
    <u-picker :show="versionShow" :columns="versionColumns" keyName="version_name" @confirm="confirmVersion"
      @cancel="versionShow = false"></u-picker>
    <!-- 课程大类下拉框 -->
    <u-picker :show="categoryTypeShow" :columns="categoryTypeColumns" keyName="type_name" @confirm="confirmCategoryType"
      @cancel="categoryTypeShow = false"></u-picker>
    <!-- 一级分类下拉框 -->
    <u-picker :show="firstCategoryShow" :columns="firstCategoryColumns" keyName="first_category_name"
      @confirm="confirmFirstCategory" @cancel="firstCategoryShow = false"></u-picker>
    <!-- 二级分类下拉框 -->
    <u-picker :show="secondCategoryShow" :columns="secondCategoryColumns" keyName="second_category_name"
      @confirm="confirmSecondCategory" @cancel="secondCategoryShow = false"></u-picker>
    <!-- 学生下拉框 -->
    <u-popup class="userList" :show="userShow" @close="userShow = false">
      <view class="userBox">
        <scroll-view class="scroll-y" scroll-y="true">
          <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
            <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in userColumns" :key="index"
              :label="item.username" :name="item.user_id">
            </u-checkbox>
          </u-checkbox-group>
        </scroll-view>
        <view class="btnS flex">
          <view class="qxBtn" @tap="userShow = false">
            取消
          </view>
          <view class="" @tap="seeUser()">
            确认
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        schoolShow: false,
        schoolColumns: [],
        planShow: false,
        planColumns: [
          [{
            label: '正式课',
            id: 1
          }, {
            label: '体验课',
            id: 2
          }, {
            label: '复习课',
            id: 3
          }]
        ],
        planText: '请选择',
        teacherShow: false,
        teacherColumns: [],
        teacherText: '请选择',
        userShow: false,
        checkboxValue1: [],
        userColumns: [],
        userText: '请选择',
        schoolText: "请选择",
        dateText: '请选择',
        categoryTypeColumns: [],
        categoryTypeText: '请选择',
        firstCategoryShow: false,
        firstCategoryColumns: [],
        firstCategoryText: '请选择',
        secondCategoryShow: false,
        secondCategoryColumns: [],
        secondCategoryText: '请选择',
        versionShow: false,
        versionColumns: [],
        versionText: '请选择',
        startTimeText: '07:30',
        endTimeText: '09:30',
        sexShow: false,
        categoryTypeShow: false,
        dateShow: false,
        timeShow: false,
        timeShow1: false,
        date: Number(new Date()),
        user_list: [],
        info: {
          school_id: '',
          day_time: '',
          start_time: '07:30',
          end_time: '09:30',
          teacher_id: '',
          plan_type: '',
          user_data: '',
          category_type: '',
          first_category_id: '',
          second_category_id: '',
          version_id: '',
          users: [],
          firstCategoryList: [],
          secondCategoryList: [],
          versionList: [],
        },
      };
    },
    onLoad(option) {
      this.getAllSchool();
      this.getAllVersion(1)
      this.getAllCategoryType();
      this.info.plan_sn = option.plan_sn
      this.getData(option.plan_sn)
    },
    methods: {
      async getData(sn) {
        const {
          data: res
        } = await uni.$http.post('school/teacher/getPlanDetail', {
          plan_sn: sn
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        console.log(res.data);
        this.schoolText = res.data.school.school_name
        this.dateText = res.data.day_time
        this.teacherText = res.data.teacher.teacher_nickname
        this.info.day_time = res.data.day_time
        this.info.end_time = res.data.end_time
        this.info.start_time = res.data.start_time
        this.info.school_id = res.data.school.id
        this.info.teacher_id = res.data.teacher.id
        this.info.plan_type = res.data.plan_type
        this.info.category_type = res.data.category_type
        this.info.first_category_id = res.data.first_category_id
        this.info.second_category_id = res.data.second_category_id
        this.info.version_id = res.data.version_id
        this.users = res.data.teacher_plan_detail
        if (this.info.plan_type == 1) {
          this.planText = '正式课'
        } else if (this.info.plan_type == 2) {
          this.planText = '体验课'
        } else {
          this.planText = '复习课'
        }
        if (this.info.school_id) {
          this.getSchoolUserList(this.info.school_id)
        }
        this.users.forEach(i => {
          this.user_list.push(i.user.id)
        })
        const arr = []
        this.users.forEach(i => {
          arr.push(i.user.username)
        })
        this.userText = arr.join(",");
        this.seeCategoryType()
        this.seeVersion()
      },
      seeVersion() {
        this.versionList.forEach(i => {
          if (i.version_id == this.info.version_id) {
            this.versionText = i.version_name
          }
        })
        this.getAllFirstCategory(this.info.first_category_id)
      },
      seeCategoryType() {
        this.categoryTypeColumns[0].forEach(i => {
          if (i.type_id == this.info.category_type) {
            this.categoryTypeText = i.type_name
          }
        })
        this.getAllFirstCategory(this.info.first_category_id)
      },
      seeFirstCategory() {
        this.firstCategoryList.forEach(i => {
          if (i.first_category_id == this.info.first_category_id) {
            this.firstCategoryText = i.first_category_name
          }
        })
        this.getAllSecondCategory(this.info.school_id)
      },
      seeSecondCategory() {
        this.secondCategoryList.forEach(i => {
          if (i.second_category_id == this.info.second_category_id) {
            this.secondCategoryText = i.second_category_name
          }
        })
      },
      timestampToDate(timestamp) {
        var date = new Date(timestamp); // 如果timestamp是数值，则直接使用，否则需要转换
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString().padStart(2, '0');
        var day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      confirmDate(e) {
        this.dateText = this.timestampToDate(e.value)
        this.info.day_time = this.timestampToDate(e.value)
        this.dateShow = false
      },
      confirmStarTime(e) {
        this.info.start_time = e.value
        this.timeShow = false
      },
      confirmEndTime(e) {
        this.info.end_time = e.value
        this.timeShow1 = false
      },
      confirmTeacher(e) {
        this.info.teacher_id = e.value[0].teacher_id
        this.teacherText = e.value[0].teacher_nickname
        this.teacherShow = false
      },
      confirmVersion(e) {
        this.info.version_id = e.value[0].version_id
        this.versionText = e.value[0].version_name
        this.versionShow = false
        this.versionColumns = this.versionColumns
      },
      confirmCategoryType(e) {
        this.info.category_type = e.value[0].type_id
        this.categoryTypeText = e.value[0].type_name
        this.categoryTypeShow = false
      },
      confirmFirstCategory(e) {
        this.info.first_category_id = e.value[0].first_category_id
        this.firstCategoryText = e.value[0].first_category_name
        this.firstCategoryShow = false
      },
      confirmSecondCategory(e) {
        this.info.second_category_id = e.value[0].second_category_id
        this.secondCategoryText = e.value[0].second_category_name
        this.secondCategoryShow = false
      },
      checkboxChange(n) {
        this.user_list = n
      },

      async getAllFirstCategory(id) {
        if (!this.info.category_type) {
          this.toast.msg('请选择课程大类')
          return
        }
        this.firstCategoryColumns = []
        const {
          data: res
        } = await uni.$http.post('school/index/getAllFirstCategory', {
          type_id: this.info.category_type
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.firstCategoryList = res.data
        this.firstCategoryColumns.push(res.data);
        if (!id) {
          this.firstCategoryShow = true
        }
        this.seeFirstCategory()
      },
      async getAllSecondCategory(id) {
        if (!this.info.first_category_id) {
          this.toast.msg('请选择一级分类')
          return
        }
        this.secondCategoryColumns = []
        const {
          data: res
        } = await uni.$http.post('school/index/getAllSecondCategory', {
          type_id: this.info.category_type,
          first_category_id: this.info.first_category_id
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.secondCategoryList = res.data
        this.secondCategoryColumns.push(res.data);
        if (!id) {
          this.secondCategoryShow = true
        }
        this.seeSecondCategory()
      },
      async getAllVersion(id) {
        this.versionColumns = []
        const {
          data: res
        } = await uni.$http.post('school/index/getAllVersion')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.versionList = res.data
        this.versionColumns.push(res.data);
        if (!id) {
          this.versionShow = true
        }
      },
      async getAllSchool() {
        const {
          data: res
        } = await uni.$http.post('school/index/getAllSchool')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.schoolColumns.push(res.data);
      },
      async getAllCategoryType() {
        const {
          data: res
        } = await uni.$http.post('school/index/getAllCategoryType')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.categoryTypeColumns.push(res.data);
      },
      async getSchoolTeacherList() {
        if (!this.info.school_id) {
          this.toast.msg('请先选择店铺')
          return
        }

        const {
          data: res
        } = await uni.$http.post('school/teacher/getSchoolTeacherList', {
          school_id: this.info.school_id
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.teacherColumns.push(res.data);
        this.teacherShow = true
      },
      async getSchoolUserList(id) {
        if (!this.info.school_id) {
          this.toast.msg('请先选择店铺')
          return
        }
        const {
          data: res
        } = await uni.$http.post('school/teacher/getSchoolUserList', {
          school_id: this.info.school_id
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.userColumns = res.data;
        if (!id) {
          this.userShow = true
        }
      },
      confirmSchool(e) {
        this.schoolText = e.value[0].school_name
        this.info.school_id = e.value[0].id
        this.schoolShow = false
      },
      confirmPlan(e) {
        this.planText = e.value[0].label
        this.info.plan_type = e.value[0].id
        this.planShow = false
      },
      async savePlan() {
        this.info.user_data = JSON.stringify(this.user_list)
        const {
          data: res
        } = await uni.$http.post('school/teacher/savePlan', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.toast.msg('修改成功')
        setTimeout(() => {
          uni.navigateTo({
            url: '../coach/lineUp'
          })
        }, 1000)
      },
      seeUser() {
        const arr = []
        this.userColumns.forEach(item => {
          this.user_list.forEach(i => {
            if (item.user_id == i) {
              arr.push(item.username)
            }
          })
        })
        this.userText = arr.join(",");
        this.userShow = false
      },
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;

    .form {
      width: 652rpx;
      margin: 40rpx auto;
      padding-bottom: 30rpx;

      .useritem {
        display: flex;
        align-items: center;
        padding: 0 35rpx 0 19rpx;
        margin-bottom: 30rpx;
        width: 652rpx;
        border-radius: 10rpx;
        border: 2rpx solid #FCF7F7;

        .label {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          margin-right: 70rpx;
          width: 160rpx;

          .starImg {
            width: 14rpx;
            height: 42rpx;
            margin-right: 15rpx;
          }
        }

        .ipt {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          color: #666;

          .img {
            width: 26rpx;
            height: 26rpx;
            margin-right: 10rpx;
          }

          .lowerImg {
            position: absolute;
            right: 0;
            width: 20rpx;
            height: 11rpx;
          }
        }
      }

      .item {
        display: flex;
        align-items: center;
        padding: 0 35rpx 0 19rpx;
        margin-bottom: 30rpx;
        width: 652rpx;
        height: 78rpx;
        line-height: 78rpx;
        border-radius: 10rpx;
        border: 2rpx solid #FCF7F7;

        .label {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          margin-right: 70rpx;
          width: 160rpx;

          .starImg {
            width: 14rpx;
            height: 42rpx;
            margin-right: 15rpx;
          }
        }

        .ipt {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          color: #666;

          .img {
            width: 26rpx;
            height: 26rpx;
            margin-right: 10rpx;
          }

          .lowerImg {
            position: absolute;
            right: 0;
            width: 20rpx;
            height: 11rpx;
          }
        }

        .time {
          color: #666;
          display: flex;
          align-items: center;

          .timeImg {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;

          }
        }
      }

      .textBox {
        padding: 0 35rpx 0 19rpx;
        display: flex;
        border: 2rpx solid #FCF7F7;

        .label {
          height: 70rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          margin-right: 70rpx;
          width: 160rpx;

          .starImg {
            width: 14rpx;
            height: 42rpx;
            margin-right: 15rpx;
          }
        }

        .ipt {
          flex: 1;
          height: 352rpx;

          .u-textarea {
            height: 352rpx;
            border: none;
            padding-left: 0;

            /deep/.u-textarea__field {
              height: 352rpx !important;
            }

            .uni-textarea-textarea {
              height: 352rpx;
            }
          }
        }
      }
    }

    .btn {
      position: fixed;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 652rpx;
      height: 78rpx;
      line-height: 78rpx;
      text-align: center;
      background: #CCCCCC;
      border: 2rpx solid #69A1E0;
    }
  }

  .userList {
    .userBox {
      padding: 50rpx 20rpx;

      .scroll-y {
        height: 500rpx;
      }

      .u-checkbox-group {
        display: flex;
        align-items: center;

        flex-direction: row;
        flex-wrap: wrap;

        .u-checkbox {
          width: 33%;
        }
      }
    }

    /deep/.u-transition {
      height: 700rpx;
    }

    .btnS {
      width: 80%;
      margin: 50rpx auto;

      view {
        width: 45%;
        height: 50rpx;
        border-radius: 10rpx;
        text-align: center;
        line-height: 50rpx;
        color: #fff;
        background-color: #2979ff;
      }

      .qxBtn {
        color: #333;
        background-color: #999;
        margin-right: 20rpx;
      }
    }
  }
</style>